<template>
  <h2>Computed使用</h2>
  <ol>
    <li>
      计算属性值会基于其响应式依赖被缓存，仅会在其响应式依赖更新时才重新计算
    </li>
    <li>计算属性的计算函数应只做计算而没有任何其他的副作用</li>
    <li>不要在计算函数中做异步请求或者更改 DOM</li>
    <li>计算函数的职责应该仅为 计算和返回该值</li>
  </ol>
  <p>
    使用计算属性: <span>{{ name }}</span>
  </p>
  <p>
    可写的计算属性: <span>{{ fullList }}</span>
  </p>
</template>
<script lang="ts" setup>
import { reactive, computed, ref } from "vue";

const author = reactive({
  name: "john",
});
// 一个计算属性 ref
const name = computed(() => author.name.toUpperCase());

// 一个可写的计算属性

let list = $ref([1, 2, 3]);

let fullList = $computed({
  // getter
  get() {
    return list;
  },
  // setter
  set(nums: Array<number>) {
    list = nums;
  },
});

// 进行重写
fullList = [12, 13, 14, 15];
</script>
